<template>
    <div class="customerQueryChange">
        <!-- 转接自动语音服务 -->
        <div class="tab-header">
            <span>转接自动语音服务</span>
            <div class="headerTitle">客户级查询密码修改</div>
        </div>
        <div class="customerQueryChangeMain">
            <el-row>
                <span class="timeLabel">证件类型：</span>
                <el-form :model="timeData" size="small">
                    <el-select v-model="cardNumber" clearable>
                        <el-option
                            v-for="item in cardNumberData"
                            :key="item.id"
                            :label="item.label"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </el-form>
            </el-row>
            <el-row>
                <span class="timeLabel">证件号码：</span>
                <el-form :model="timeData">
                    <el-input v-model="timeData.enddate" placeholder class="inputBox"></el-input>
                </el-form>
            </el-row>
            <el-row>
                <span class="timeLabel">卡号：</span>
                <el-form :model="timeData">
                    <el-select v-model="cardNumber" clearable>
                        <el-option
                            v-for="item in cardNumberData"
                            :key="item.id"
                            :label="item.label"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </el-form>
            </el-row>
        </div>
        <div class="btnBox">
            <el-button
                type="primary"
                size="small"
                icon="el-icon-search"
                @click="dialogTable(true)"
            >查询</el-button>
            <el-button type="primary" size="small" @click="handleClose">关闭</el-button>
        </div>
    </div>
</template>

<script>
import { closePage } from '@/utils/Common';

export default {
    name: 'customerQueryChange',
    data() {
        return {
            // 起始日期
            timeData: {
                startData: 20194545,
                endDate: 212121,
            },
            // 下拉框数据
            cardNumberData: [
                {
                    id: '1',
                    label: '北京',
                },
                {
                    id: '2',
                    label: '上海',
                },
                {
                    id: '3',
                    label: '内蒙古',
                },
            ],
            cardNumber: '',


        };
    },
    methods: {
        // 点击关闭 处理事件
        handleClose() {
            closePage(this.$route, this, 1);
        },
        dialogTable(visible) {
            this.dialogVisible = visible;
        },
    },
};
</script>

<style lang='scss'>
.customerQueryChange {
    width: 100%;
    height: 100%;
    background: #fff;
    // padding:10px;
    box-sizing: border-box;
    border-radius: 5px;
    /* //头部内容 */
    .tab-header {
        width: 100%;
        text-align: left;
        span {
            font-size: 14px;
        }

        .headerTitle {
            font-size: 16px;
            margin: 10px 0px;
            color: skyblue;
        }
    }
    //主体内容
    .customerQueryChangeMain {
        width: 100%;
        .el-row {
            margin: 20px 0;
            display: flex;
            text-align: center;
            justify-content: center;
            .timeLabel {
                font-size: 14px;
                margin-right: 15px;
                margin-top: 8px;
            }
            .Notice {
                font-size: 12px;
                color: red;
                margin-top: 10px;
                margin-left: 15px;
            }
        }
    }
    .btnBox {
        margin-top: 30px;
        text-align: center;
    }
    .dialogVisible {
        margin-top: 20px;
    }
}
</style>
